<template>
	<!-- 综合服务 首页 -->
	<view>
		<!-- 头部 -->
		<headtop @notice='btn1'></headtop>
		<view class="side">
			<swiper class="banner " :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item>
					<view class="swiper-item">
						<image src="../..//static/shop/1595833354066324005.jpg" mode=""></image>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">
						<image src="../../static/shop/1595833443068049276.jpg" mode=""></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<!-- 导航 -->
		<view class="lists">
			<view class="list" v-for="(item,index) in list" :key="index" @click="router(index)">
				<view class="icon">
					<image class="img" :src="'../../static/Home/icon'+(index+1)+'.png'" mode=""></image>
				</view>
				<view class="text">
					{{item}}
				</view>
			</view>
			<view @click="btn">
				<view class="icon">
					<image class="img" src="../../static/zonghe/icon-1.png" mode=""></image>
				</view>
				<view class="text1">
					服务报备
				</view>
			</view>
		</view>
		<!--  导航 -->
		<!-- 富同精英 -->
		<view class="row1">
			<view class="title" >
				<view class="">
					富同精英
				</view>
				<image class="img1" src="../../static/icon/iconRight.png" mode=""></image>
			</view>
			<view class="ul">
				<view class="li" v-for="(itme,index) in 4" :key='index'>
					<view class="image">
						<image class="img1" src="../../static/shop/1595657049599668876.jpg" mode=""></image>
					</view>
					<view class="msg">
						<view class="top">
							<view class="txt">
								<view class="txt1">
									<view class="name">
										张三
									</view>
									<view class="span">
										上海
									</view>
								</view>
								<view class="num">
									工号：201400
								</view>
							</view>
							<view class="look">
								查看
							</view>
						</view>
						<view class="bottom">
							简介：专业从事房地产行业数十年，拥有丰富经验...
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="box">
			
		</view>
	</view>
</template>

<script>
	import headtop from '../../components/head/head.vue'
	export default {
		components: {
			headtop
		},
		data() {
			return {
				list: ['富同精英', '在线贷款', '家庭职业培训', '知识库', '奖金制度展示', '人才招募']
			};
		},
		methods:{
			router(index){
				console.log(index)
				if(index==0){
					uni.navigateTo({
						url:'../futongJY/futongJY'
					})
				}
				if(index==1){
					uni.navigateTo({
						url:'../daikuan/daikuan'
					})
				}
				if(index==2){
					uni.navigateTo({
						url:'../pexun/pexun'
					})
				}
				if(index==3){
					uni.navigateTo({
						url:'../zhishi/zhishi'
					})
				}
				if(index==4){
					uni.navigateTo({
						url:'../jiangjin/jiangjin'
					})
				}
				if(index==5){
					uni.navigateTo({
						url:'../zhaopin/zhaopin'
					})
				}
			},
			btn(){
				uni.navigateTo({
					url:'../serve/serve'
				})
			},
			btn1(data){
				uni.navigateTo({
					url:'../../Estate/Service/Service'
				})
				console.log(data)
			}
		}
	}
</script>

<style lang="scss">
	.box{
		height: 50rpx;
	}
	.banner {
		height: 300rpx;
		width: 90%;
		border-radius: 10rpx;
		margin: auto;

		.swiper-item {
			border-radius: 10rpx;

			image {
				width: 100%;
				border-radius: 10rpx;
				height: 300rpx;
			}
		}
	}

	.lists {
		width: 90%;
		margin: 40rpx auto;
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
		margin-bottom: 40rpx;
		background-color: #fff;
		border-radius: 10rpx;
		box-shadow: 0 8rpx 10rpx 1rpx #e7e7e7;
		padding-bottom: 20rpx;

		.icon {
			margin: auto;
			text-align: center;
			width: 100rpx;
			height: 100rpx;
			margin-bottom: 10rpx;

		}

		.text1 {
			font-weight: 550;
		}

		.list {
			width: 30%;
			margin: 20rpx 10rpx;
			text-align: center;
			border-bottom: 6rpx solid rgba(0, 0, 0, 0);

			.icon {
				margin: auto;
				text-align: center;
				width: 80rpx;
				height: 80rpx;
				margin-bottom: 10rpx;
			}

			.text {
				color: rgba(16, 16, 16, 100);
				font-size: 26rpx;
			}
		}

	}

	.row1 {
		width: 90%;
		margin: auto;

		.title {
			display: flex;
			justify-content: space-between;
			color: rgba(51, 51, 51, 100);
			font-size: 36rpx;
			text-align: left;
			font-weight: 550;

			.img1 {
				margin-top: 15rpx;
				width: 15rpx;
				height: 25rpx;
			}
		}

		.ul {
			margin-top: 30rpx;
			border-radius: 15rpx;
			background-color: #FFFFFF;
			.li {
				display: flex;

				.image {
					width: 30%;
					padding: 30rpx;

					.img1 {
						width: 140rpx;
						height: 140rpx;
						border-radius: 50%;
					}
				}

				.msg {
					width: 70%;
					padding: 20rpx;
					.top {
						display: flex;
						justify-content: space-between;
						.look{
							margin-top: 10rpx;
							width: 128rpx;
							height: 55rpx;
							line-height: 55rpx;
							border-radius: 28rpx;
							background-color: rgba(255, 196, 91, 100);
							color: rgba(16, 16, 16, 100);
							font-size: 28rpx;
							text-align: center;
							font-family: Arial;
							border: 1px solid rgba(255, 255, 255, 100);
						}
					}
					.bottom{
						margin-top: 10rpx;
						color: #bfbfbf;
						font-size: 28rpx;
									overflow: hidden;
									text-overflow: ellipsis;
									display: -webkit-box;
									-webkit-box-orient: vertical;
									-webkit-line-clamp: 2;
					}
					.txt {
						.txt1 {
							display: flex;

							.name {
								font-weight: 550;
							}

							.span {
								font-size: 28rpx;
								color: #999999;
								margin-left: 10rpx;
							}
						}

						.num {
							margin-top: 10rpx;
							color: #999;
							font-size: 24rpx;
						}
					}
				}
			}
		}
	}
</style>
